/* 自定义页脚跳动的心样式 */
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 168);
}

/* 流星特效 */
.stage{
  position: fixed;
}
.shooting-star {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 2px;
  background: url(/images/shooting-star.png) center center no-repeat;
  background-size: 100% 100%;
  transform: rotate(20deg);
}
.shooting-star-1,
.shooting-star-2,
.shooting-star-3,
.shooting-star-4,
.shooting-star-5,
.shooting-star-6 {
  top: 40px;
  left: -200px;
  animation-name: shooting-star;
  animation-duration: 8s;
  animation-delay: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.shooting-star-2{
  top: 200px;
  left: -200px;
  animation-delay: 8s;
}

.shooting-star-3{
  top: -20px;
  left: -200px;
  animation-delay: 12s;
}

.shooting-star-4{
  top: 150px;
  left: -400px;
  animation-delay: 16s;
}

.shooting-star-5{
  top: 280px;
  left: -400px;
  animation-delay: 20s;
}

.shooting-star-6{
  top: -40px;
  left: -200px;
  animation-delay: 24s;
}

 @keyframes shooting-star {
  0% {
    transform: translate3d(0, 0, 0) rotate(20deg);
  }
  /* 68% {
    transform: translate3d(480px, 174px, 0) rotate(20deg);
    opacity: 0.6;
  }
  80% {
    transform: translate3d(820px, 314px, 0) rotate(20deg);
    opacity: 0.2;
  } */
  100% {
    transform: translate3d(1240px, 454px, 0) rotate(20deg);
    opacity: 0;
  }
}
